<template>
    <view>
        <view class="biaoshi_contain">
            <nut-popup :visible="orderStore.author !== ''" position="bottom" close-on-click-overlay
                @click-overlay="orderStore.author = ''" @click-close-icon="orderStore.author = ''"
                :style="{ height: '50%' }" round>
                <view class="title">授权收货人</view>
                <view class="content">
                    <nut-form :model-value="formData">
                        <nut-form-item label="新收货人" label-align="center">
                            <nut-input v-model="formData.name" placeholder="请输入新收货人真实姓名" />
                        </nut-form-item>
                        <nut-form-item label="联系方式" label-align="center">
                            <nut-input v-model="formData.phone" placeholder="新收货人的手机号码" />
                        </nut-form-item>
                        <view style="display: flex">
                            <nut-form-item label="验证码" placeholder="请输入验证码">
                                <nut-input v-model="formData.verify" placeholder="请输入验证码" />
                            </nut-form-item>
                            <view class="yzmbt" v-if="!phoneMsg">
                                <view class="btn" @click="getCode">获取验证码</view>
                            </view>
                            <view class="yzmbt" v-else>
                                <view class="btn" style="margin: 0">重新获取({{ num }})</view>
                            </view>
                        </view>
                    </nut-form>
                </view>
                <view class="tips" v-if="phoneMsg">
                    验证码将发送到当前发货人手机（{{ formData.phone }}）注意查收
                </view>
                <view class="footer" style="padding: 0 20rpx; width: 710rpx">
                    <nut-button type="info" class="bt-short-white" @click="outSure"
                        style="font-size: 30rpx">暂不授权</nut-button>
                    <nut-button type="info" class="bt-long-white" @click="sure">确定收货人</nut-button>
                </view>
            </nut-popup>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { customerVerify, editOrderAuthorize } from '@/@api/order'
import Taro from '@tarojs/taro'
import { ref } from 'vue'
import useOrderStore from '@/store/order'

const orderStore = useOrderStore()

const formData = ref({
    name: '',
    phone: '',
    verify: ''
})

const phoneMsg = ref(false)

// 验证码倒计
const num = ref(60)
const Timer = ref()

//暂不授权
function outSure() {
    formData.value = {
        name: '',
        phone: '',
        verify: ''
    };
    orderStore.author = ''
}
async function getCode() {
    if (formData.value.phone.length == 11) {
        const res = await customerVerify({
            phone: formData.value.phone,
        })

        if (res.data.code == 200) {
            phoneMsg.value = true;
        } else {
            Taro.showToast({
                icon: 'error',
                title: '请输入正确的手机号'
            })
        }
    }
    clearInterval(Timer.value);
    num.value = 60;
    Timer.value = setInterval(() => {
        num.value--;
        if (num.value <= 0) {
            clearInterval(Timer.value);
            phoneMsg.value = false;
        }
    }, 1000);
}
async function sure() {
    if (formData.value.name && formData.value.phone.length == 11 && formData.value.verify) {
        const res = await editOrderAuthorize([{
            ssoId: orderStore.author,
            authorizeUser: formData.value.name,
            authorizePhone: formData.value.phone,
            verify: formData.value.verify,
        }])
       
        if (res.data.code === 200) {
            formData.value.name = "";
            formData.value.phone = "";
            formData.value.verify = "";
            phoneMsg.value = false;
            orderStore.author = ''
            Taro.showToast({
                icon: 'error',
                title: '授权取货人成功'
            })
        }

    } else {
        Taro.showToast({
            icon: 'error',
            title: '请填写正确的信息'
        })
    }
}
</script>
<style lang="scss">
.biaoshi_contain {
    .title {
        position: fixed;
        /* margin-left: 20rpx; */
        margin-bottom: 20rpx;
        height: 100rpx;
        width: 100%;
        font-size: 35rpx;
        font-weight: bold;
        line-height: 100rpx;

        border-top-left-radius: 11%;
        border-top-right-radius: 11%;
        padding-left: 20rpx;
    }

    .surebtn {
        position: fixed;
        bottom: 0;
        width: 710rpx;
        padding: 0 20rpx;
        padding-bottom: 20rpx;
    }

    .content {
        width: 100%;
        height: auto;

        margin-top: 100rpx;
    }

    .yzmbt {
        width: 220rpx;
        margin-right: 35rpx;
        height: 99rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

        display: flex;
        justify-content: center;
        align-items: center;

        .btn {
            width: 180rpx;
            height: 70rpx;

            border-radius: 0.100rpx;
            font-size: 30rpx;
            line-height: 70rpx;
            padding: 0 20rpx;
            border: 2rpx solid #0966ff;
            color: #0966ff;
        }
    }

    .tips {
        color: #999999;
        font-size: 25rpx;
        margin-left: 20rpx;
    }

    .footer {
        display: flex;
        justify-content: space-around;
        margin: 20rpx;
    }
}
</style>